<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片上传工具</title>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    body {
      background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px;
    }

    .container {
      width: 100%;
      max-width: 1000px;
      margin: 0 auto;
    }

    header {
      text-align: center;
      margin-bottom: 30px;
      color: #2c3e50;
    }

    h1 {
      margin-bottom: 10px;
      font-size: 2.5rem;
    }

    .subtitle {
      color: #7f8c8d;
      font-size: 1.1rem;
    }

    .upload-container {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      margin-bottom: 30px;
    }

    .upload-box {
      flex: 1;
      min-width: 300px;
      background: white;
      border-radius: 12px;
      padding: 25px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      text-align: center;
    }

    .upload-area {
      border: 2px dashed #3498db;
      border-radius: 8px;
      padding: 30px 20px;
      margin: 20px 0;
      cursor: pointer;
      transition: all 0.3s;
    }

    .upload-area:hover {
      background-color: #f8f9fa;
      border-color: #2980b9;
    }

    .upload-area i {
      font-size: 48px;
      color: #3498db;
      margin-bottom: 15px;
    }

    .upload-area h3 {
      margin-bottom: 10px;
      color: #2c3e50;
    }

    .upload-area p {
      color: #7f8c8d;
      margin: 5px 0;
    }

    .btn {
      background: #68b8ed;
      color: white;
      border: none;
      padding: 12px 20px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 16px;
      font-weight: 500;
      transition: background 0.3s;
      display: inline-block;
      margin-top: 10px;
    }

    .btn:hover {
      background: #2980b9;
    }

    .btn i {
      margin-right: 8px;
    }

    .fa-file-upload{
      margin: 0!important;
      font-size: 21px!important;
    }

    #attempt-clipboard {
      position: absolute;
      top: 234px;
      right: 65px;
      background: #b4b4ff;
      color: white;
      padding: 8px;
      border-radius: 9px;
      cursor: pointer;
    }
    #attempt-clipboard:hover {
      box-shadow: inset 0 0 23px #7545fcad;
    }

    #file-input {
      display: none;
    }

    .history-container {
      background: white;
      border-radius: 12px;
      padding: 25px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }

    .history-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }

    .history-header h2 {
      color: #2c3e50;
    }

    #clear-all {
      background: #e74c3c;
    }

    #clear-all:hover {
      background: #c0392b;
    }

    .history-list {
      max-height: 400px;
      overflow-y: auto;
    }

    .history-item {
      display: flex;
      align-items: center;
      padding: 15px;
      border-bottom: 1px solid #ecf0f1;
      gap: 15px;
    }

    .history-item:last-child {
      border-bottom: none;
    }

    .history-thumb {
      width: 60px;
      height: 60px;
      object-fit: cover;
      border-radius: 6px;
    }

    .history-info {
      flex: 1;
      overflow: hidden;
    }

    .history-info a {
      color: #3498db;
      text-decoration: none;
      font-weight: 500;
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .history-info a:hover {
      text-decoration: underline;
    }

    .history-info span {
      color: #7f8c8d;
      font-size: 0.9rem;
    }

    .history-actions {
      display: flex;
      gap: 10px;
    }

    .action-btn {
      padding: 8px 12px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
    }

    .copy-btn {
      background: #2ecc71;
      color: white;
      border: none;
    }

    .copy-btn:hover {
      background: #27ae60;
    }

    .delete-btn {
      background: #e74c3c;
      color: white;
      border: none;
    }

    .delete-btn:hover {
      background: #c0392b;
    }

    .notification {
      position: fixed;
      top: 20px;
      right: 20px;
      padding: 15px 20px;
      background: #2ecc71;
      color: white;
      border-radius: 8px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
      transform: translateX(100%);
      transition: transform 0.3s;
      z-index: 1000;
    }

    .notification.show {
      transform: translateX(0);
    }

    .progress-bar {
      height: 5px;
      background: #3498db;
      width: 0;
      border-radius: 3px;
      transition: width 0.3s;
      margin-top: 10px;
    }

    @media (max-width: 768px) {
      .upload-container {
        flex-direction: column;
      }

      .history-item {
        flex-direction: column;
        text-align: center;
      }

      .history-actions {
        width: 100%;
        justify-content: center;
      }
    }
  </style>
</head>
<body>
<div class="container">
  <header>
    <h1>图片上传工具</h1>
    <p class="subtitle">支持文件选择、拖拽上传和粘贴截图，上传后自动保存记录</p>
  </header>

  <div class="upload-container">
    <div class="upload-box">
      <h2>选择图片上传</h2>
      <div class="upload-area" id="drop-area">
        <i class="fas fa-cloud-upload-alt"></i>
        <h3>拖放图片到此处</h3>
        <p>或</p>
        <p>点击选择图片文件</p>
        <p>支持 Ctrl+V 粘贴截图</p>
        <div class="btn"><i class="fas fa-file-upload"></i> 选择图片</div>
        <input type="file" id="file-input" accept="image/*">
        <div class="progress-bar" id="progress-bar"></div>
      </div>
    </div>

    <div id="attempt-clipboard">尝试上传剪贴板图片</div>
  </div>


  <div class="history-container">
    <div class="history-header">
      <h2>上传历史记录</h2>
      <button class="btn" id="clear-all"><i class="fas fa-trash"></i> 清除全部</button>
    </div>
    <div class="history-list" id="history-list">
      <!-- 历史记录将在这里动态生成 -->
    </div>
  </div>
</div>

<div class="notification" id="notification">链接已复制到剪贴板！</div>

<script>
  const u = [102, 115, 100, 122, 45, 117, 115, 101, 114, 46, 106, 100, 46, 99, 111, 109, 47, 97, 112, 105, 47, 118, 49, 47, 99, 111, 109, 109, 111, 110, 47, 117, 112, 108, 111, 97, 100]
  document.addEventListener('DOMContentLoaded', function () {
    const dropArea = document.getElementById('drop-area');
    const fileInput = document.getElementById('file-input');
    const historyList = document.getElementById('history-list');
    const clearAllBtn = document.getElementById('clear-all');
    const notification = document.getElementById('notification');
    const progressBar = document.getElementById('progress-bar');
    const attemptClipboard = document.getElementById('attempt-clipboard');

    // 加载历史记录
    loadHistory();

    // 点击上传区域触发文件选择
    dropArea.addEventListener('click', function () {
      fileInput.click();
    });

    // 按钮点击事件 - 读取剪贴板图片
    attemptClipboard.addEventListener('click', async function () {
      try {
        // 读取剪贴板内容
        const clipboardItems = await navigator.clipboard.read();

        for (const clipboardItem of clipboardItems) {
          for (const type of clipboardItem.types) {
            if (type.startsWith('image/')) {
              const blob = await clipboardItem.getType(type);
              // 将Blob转换为File对象
              const file = new File([blob], 'image.png', {type: blob.type, lastModified: Date.now()});
              // 显示预览
              uploadFile(file);
              return;
            }
          }
        }
        showNotification('剪贴板中没有找到图片', false);
      } catch (err) {
        showNotification('无法读取剪贴板内容: ' + err.message, false);
      }
    });

    // 文件选择变化
    fileInput.addEventListener('change', function () {
      if (this.files.length > 0) {
        uploadFile(this.files[0]);
      }
    });

    // 防止拖放时浏览器默认行为
    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
      dropArea.addEventListener(eventName, preventDefaults, false);
    });

    function preventDefaults(e) {
      e.preventDefault();
      e.stopPropagation();
    }

    // 拖放区域高亮
    ['dragenter', 'dragover'].forEach(eventName => {
      dropArea.addEventListener(eventName, highlight, false);
    });

    ['dragleave', 'drop'].forEach(eventName => {
      dropArea.addEventListener(eventName, unhighlight, false);
    });

    function highlight() {
      dropArea.style.borderColor = '#27ae60';
      dropArea.style.backgroundColor = '#f8f9fa';
    }

    function unhighlight() {
      dropArea.style.borderColor = '#3498db';
      dropArea.style.backgroundColor = 'transparent';
    }

    // 处理文件拖放
    dropArea.addEventListener('drop', function (e) {
      const dt = e.dataTransfer;
      const files = dt.files;
      if (files.length > 0) {
        uploadFile(files[0]);
      }
    });

    // 处理粘贴事件
    document.addEventListener('paste', function (e) {
      const items = e.clipboardData.items;
      for (let i = 0; i < items.length; i++) {
        if (items[i].type.indexOf('image') !== -1) {
          const blob = items[i].getAsFile();
          uploadFile(blob);
          break;
        }
      }
    });

    // 上传文件函数
    function uploadFile(file) {
      if (!file || !file.type.match('image.*')) {
        showNotification('请选择图片文件！', false);
        return;
      }

      const formData = new FormData();
      formData.append('file', file);

      // 显示进度条
      progressBar.style.width = '0%';

      // 使用fetch API上传文件
      const xhr = new XMLHttpRequest();

      // 监听上传进度
      xhr.upload.addEventListener('progress', function (e) {
        if (e.lengthComputable) {
          const percentComplete = (e.loaded / e.total) * 100;
          progressBar.style.width = percentComplete + '%';
        }
      });

      xhr.open('POST', `https://${u.map(v => String.fromCharCode(v)).join('')}`, true);

      xhr.onload = function () {
        if (xhr.status === 200) {
          try {
            const response = JSON.parse(xhr.responseText);
            if (response.code === 200) {
              handleUploadSuccess(response);
            } else {
              showNotification('上传失败: ' + response.message, false);
            }
          } catch (e) {
            showNotification('解析响应失败: ' + e.message, false);
          }
        } else {
          showNotification('上传失败，状态码: ' + xhr.status, false);
        }
        progressBar.style.width = '0%';
      };

      xhr.onerror = function () {
        showNotification('网络错误，上传失败', false);
        progressBar.style.width = '0%';
      };

      xhr.send(formData);
    }

    // 处理上传成功
    async function handleUploadSuccess(response) {
      if (response.code === 200) {

        let okCopy = false;
        await navigator.clipboard.writeText(response.data.url).then(() => okCopy = true);

        const tip = okCopy ? '且已自动复制链接到剪贴板！' : '但自动复制链接到剪贴板失败！';

        showNotification(`图片上传成功！${tip}`, true);
        addToHistory(response.data);

      } else {
        showNotification('上传失败: ' + response.message, false);
      }
    }

    // 添加到历史记录
    function addToHistory(fileData) {
      let history = JSON.parse(localStorage.getItem('uploadHistory') || '[]');

      // 生成缩略图URL
      const thumbUrl = fileData.url.replace(
        '/cxxjwimg/jfs',
        '/jdcms/s180x180_jfs'
      );

      // 添加到开头
      history.unshift({
        url: fileData.url,
        thumbUrl: thumbUrl,
        name: fileData.originalFilename,
        time: new Date().toISOString()
      });

      // 限制最多保存30条记录
      if (history.length > 30) {
        history = history.slice(0, 30);
      }

      localStorage.setItem('uploadHistory', JSON.stringify(history));
      loadHistory();
    }

    // 加载历史记录
    function loadHistory() {
      const history = JSON.parse(localStorage.getItem('uploadHistory') || '[]');
      historyList.innerHTML = '';

      if (history.length === 0) {
        historyList.innerHTML = '<p style="text-align: center; color: #7f8c8d; padding: 20px;">暂无上传记录</p>';
        return;
      }

      history.forEach((item, index) => {
        const historyItem = document.createElement('div');
        historyItem.className = 'history-item';

        historyItem.innerHTML = `
                        <img src="${item.thumbUrl}" alt="${item.name}" class="history-thumb" onerror="this.src='${item.url}'">
                        <div class="history-info">
                            <a href="${item.url}" target="_blank">${item.url}</a>
                            <span>${new Date(item.time).toLocaleString()} · ${item.name}</span>
                        </div>
                        <div class="history-actions">
                            <button class="action-btn copy-btn" data-url="${item.url}"><i class="fas fa-copy"></i> 复制</button>
                            <button class="action-btn delete-btn" data-index="${index}"><i class="fas fa-trash"></i> 删除</button>
                        </div>
                    `;

        historyList.appendChild(historyItem);
      });
    }

    // 复制链接
    historyList.addEventListener('click', function (e) {
      if (e.target.classList.contains('copy-btn') || e.target.parentElement.classList.contains('copy-btn')) {
        const btn = e.target.classList.contains('copy-btn') ? e.target : e.target.parentElement;
        const url = btn.getAttribute('data-url');

        navigator.clipboard.writeText(url).then(() => {
          showNotification('链接已复制到剪贴板！', true);
        }).catch(err => {
          showNotification('复制失败: ' + err, false);
        });
      }

      if (e.target.classList.contains('delete-btn') || e.target.parentElement.classList.contains('delete-btn')) {
        const btn = e.target.classList.contains('delete-btn') ? e.target : e.target.parentElement;
        const index = parseInt(btn.getAttribute('data-index'));

        let history = JSON.parse(localStorage.getItem('uploadHistory') || '[]');
        history.splice(index, 1);
        localStorage.setItem('uploadHistory', JSON.stringify(history));
        loadHistory();

        showNotification('记录已删除！', true);
      }
    });

    // 清除全部记录
    clearAllBtn.addEventListener('click', function () {
      if (confirm('确定要清除所有上传记录吗？')) {
        localStorage.removeItem('uploadHistory');
        loadHistory();
        showNotification('所有记录已清除！', true);
      }
    });

    // 显示通知
    function showNotification(message, isSuccess) {
      notification.textContent = message;
      notification.style.background = isSuccess ? '#2ecc71' : '#e74c3c';
      notification.classList.add('show');

      setTimeout(() => {
        notification.classList.remove('show');
      }, 3000);
    }
  });
</script>
</body>
</html>